<template>

    <van-form @submit="onSubmit">
        <van-cell-group inset>
            <van-field v-model="username" name="username" label="手机号" placeholder="手机号"
                :rules="[{ pattern, message: '请填写手机号' }]" />
            <van-field v-model="sms" name="username" label="验证码" placeholder="验证码"
                :rules="[{ required: true, message: '请填写验证码' }]">

                <template #button>
                    <van-button size="small" type="primary" @click="yzm" :disabled="item > 0 ? true : false">
                        {{ item > 0 ? item + '秒后发送' : '发送验证码' }}
                    </van-button>
                </template>
            </van-field>

            <van-field v-model="password" type="password" name="password" label="密码" placeholder="密码"
                :rules="[{ required: true, message: '请填写密码' }]" />
        </van-cell-group>

        <div style="margin: 16px;">
            <van-button round block type="primary" native-type="submit">
                注册
            </van-button>
        </div>
    </van-form>
</template>

<script setup>
import { ref } from 'vue';
const username = ref('');
const password = ref('');
const sms = ref('');
let pattern = /^1[3-9]\d{9}$/
let item=ref()
let itemr
const yzm =()=>{
    sms.value=Math.floor(Math.random()*100000)
    if(item.value>0) return
    item.value=10
    setInterval(() => {
        item.value--
        if(item.value==0){
            clearInterval(itemr)
        }
    }, 1000);
}
import {useRouter} from 'vue-router';

let router=useRouter()
import { showSuccessToast,showFailToast } from 'vant';
import { registerApi } from "@/api/api";
const onSubmit = () => {
registerApi(username.value,password.value).then(res=>{
    if(res.data.code==0){
        showSuccessToast('注册成功')
        router.push('/login')
    }
    else{
        showFailToast('注册失败')
    }
})
};
</script>

<style lang="scss" scoped></style>